import { CSSRuleObject, styled } from "styledfc";
import { FlexCss } from "../utils/styledfc";
import Back from "./Back";
interface HeaderProps {
    h2: string;
    h1: string;
    img: string;
    height?: string;
    back?: boolean;
}
export default function Header(props: HeaderProps) {
    const { h2, h1, img, height, back } = props;

    return (
        <div className={headerStyle.className}>
            {back && <Back />}
            <div className="header__title">
                <div className="header__title-h2">{h2}</div>
                <div className="header__title-h1">{h1}</div>
            </div>
            <img className="header__img" style={{ height: height ? height : "100rem" }} src={img} />
        </div>
    );
}
const headerStyle = styled({
    width: "100%",
    height: "150rem",
    ...(FlexCss("center", "space-between") as CSSRuleObject),
    ".header__img": {
        width: "172rem",
        height: "100rem",
        marginRight: "20rem",
        marginTop: "10rem",
    },
    ".header__title": {
        marginTop: "20rem",
        marginLeft: "40rem",
        color: "white",
        lineHeight: "36rem",
        ".header__title-h2": {
            fontSize: "28rem",
            fontWeight: "100",
        },
        ".header__title-h1": {
            fontFamily: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif",
            fontSize: " 28rem",
        },
    },
});
